.fc-gray {
    color: #6b6b86;
}
.fc-primary {
    color: #00d679;
}
.head-box {
    background: url("https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManager08bfd146-ea10-45f8-9db1-28ef21202cb4.png")
        no-repeat;
    background-size: 100% 100%;
    height: 466rpx;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    &::after {
        position: absolute;
        width: 100%;
        content: "";
        left: 0;
        bottom: -20rpx;
        height: 50rpx;
        background: #f8f8fa;
        filter: blur(10rpx);
    }
    .head-bg {
        width: 245rpx;
        height: 245rpx;
        position: absolute;
        right: 0;
        bottom: 30rpx;
        z-index: -1;
    }
}
.container {
    background: #f8f8fa;
    //   background: #ccc;
    padding: 0 28rpx;
    margin-top: 190rpx;
    padding-bottom: 220rpx;
    min-height: calc(100vh - 500rpx);
}
.wrapper {
    position: relative;
    z-index: 1000;
    .head-content {
        margin-bottom: 24rpx;
    }
}
.box {
    background: #fff;
    border-radius: 16rpx;
    padding: 20rpx;
    .icon-edit {
        width: 36rpx;
        height: 36rpx;
        margin-left: 18rpx;
    }
}
.left-side {
    background: #f0f7ff;
    padding: 16rpx;
    border-radius: 8rpx;
    width: 100%;
}
.inner-box {
    position: relative;
    .button {
        height: 62rpx;
        line-height: 62rpx;
        background: rgba(148, 151, 177, 0.1);
        border-radius: 31rpx;
        margin-left: 20rpx;
        margin-top: 20rpx;
        padding: 0 32rpx;
    }
}
.title-box {
    background: url("https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManagerd4113e98-3879-4b97-8a8f-f08b38731e60.png")
        no-repeat;
    background-size: 100% 100%;
    height: 156rpx;
    color: #fff;
    position: relative;
    .video-box {
        position: absolute;
        top: 20rpx;
        right: 0;
    }
}
.icon-kinds {
    width: 36rpx;
    height: 36rpx;
    margin-right: 12rpx;
}
.kinds-box {
    padding-top: 16rpx;
    margin-left: 24rpx;
}
.icon-video {
    width: 36rpx;
    height: 36rpx;
}
.item-box {
    padding-top: 16rpx;
}
.gross-box {
    background: rgba(224, 240, 247, 0.7);
    border-radius: 0 0 16rpx 16rpx;
    padding: 0 25rpx 1rpx;
    box-sizing: border-box;
    position: relative;
    .reset-position {
        position: absolute;
        left: 24rpx;
        top: -64rpx;
    }
}
.order {
    padding: 2rpx 10rpx;
    background: #4195f8;
    border-radius: 8rpx;
    color: #fff;
    position: relative;
    margin-right: 20rpx;
    &::after {
        content: "";
        position: absolute;
        right: -20rpx;
        top: 50%;
        transform: translateY(-50%);
        border-top: 10rpx solid transparent;
        border-bottom: 10rpx solid transparent;
        border-left: 10rpx solid #4195f8;
        border-right: 10rpx solid transparent;
    }
}
.tabs-container {
    background: url("https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManager7b53c270-b0c5-49d8-903e-2bc20e951d6a.png")
        no-repeat;
    background-size: 100% 100%;
    height: 96rpx;
}
.box2-head-container {
    position: relative;
    .box2-head {
        width: 100%;
        height: 99rpx;
        display: block;
        margin-top: 24rpx;
    }
    .apply-text {
        position: absolute;
        left: 47rpx;
        top: 28rpx;
    }
}

.box-2 {
    border-radius: 0 0 16rpx 16rpx;
    padding: 12rpx 24rpx 24rpx 24rpx;
    background: #fff;
}
.video-box {
    position: relative;
    margin-right: 20rpx;
    .video {
        width: 180rpx;
        height: 136rpx;
        border-radius: 8rpx;
    }
    .video-label {
        position: absolute;
        left: 0;
        top: 0;
        font-size: 20rpx;
        height: 44rpx;
        line-height: 44rpx;
        color: #fff;
        border-radius: 8rpx 0 8rpx 0;
        padding: 0 14rpx;
    }
    .label-0 {
        background: #ffa814;
    }
}
.item-name {
    min-width: 5em;
}
.flex-1 {
    flex: 1;
}
.btn {
    height: 62rpx;
    line-height: 62rpx;
    padding: 0 32rpx;
    border-radius: 31rpx;
    background: #00d679;
    color: #fff;
}
.flex-box {
}
.foot-btn {
    padding-left: 30rpx;
    padding-right: 30rpx;
    gap: 24rpx;
    box-sizing: border-box;
    .short-btn {
        border: 1rpx solid #00d679;
    }
    .default {
        background: #fff;
        color: #565868;
        border: 1rpx solid #dee0e3;
    }
}
.hint-box {
    background: #fef4ef;
    border-radius: 8rpx;
    padding: 10rpx 20rpx;
    margin-top: 20rpx;
}
.foot-btn {
    z-index: 1000 !important;
}

.remark-label {
    font-size: 20rpx;
    color: #fff;
    padding: 0 10rpx;
    border-radius: 4rpx;
    margin-left: 12rpx;
    margin-top: 5rpx;
}
.no-shrink {
    flex-shrink: 0;
    margin-top: 12rpx;
}
.remark-label-0 {
    background: #ffa814;
}
.remark-label-1 {
    background: #00d679;
}
.remark-label-2 {
    background: #ff7e68;
}
.remark-label-3 {
    background: #565868;
}
.short-btn.disabled {
    position: relative;
    color: #fff !important;
    filter: grayscale(0) !important;
    &::before {
        content: "申请新工种";
        color: #fff;
        line-height: 94rpx;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 214, 121, 0.5);
    }
}
.video-container {
    position: relative;
    .shadow {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0);
    }
    .icon-play {
        width: 40rpx;
        height: 40rpx;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}
.set-margin {
    margin-top: -8rpx;
}
.icon-volumn {
    width: 36rpx;
    height: 36rpx;
    margin-right: 8rpx;
}
